<template>
  <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :before-close="closeDialog"
      width="80%"
  >
    <el-row v-if="this.type === 'edit'" style="margin-bottom: 10px">
      <el-col>
        <el-button type="danger" @click="handleReduction">还原</el-button>
      </el-col>
    </el-row>
    <el-card>
      <div slot="header" class="clearfix">
        <span>{{ table1Title }}</span>
      </div>
      <div class="text">
        <tableList
            :loading="loading"
            border
            maxHeight="200"
            :keySet="keySet"
            ref="multipleTable"
            :tableData="listDetails"
        >
        </tableList>
      </div>
    </el-card>
    <div style="height: 20px"></div>
    <el-card>
      <div slot="header">
        <span>{{ table2Title }}</span>
      </div>
      <div class="text">
        <tableList
            :loading="loading"
            border
            maxHeight="500"
            :keySet="keySet"
            ref="multipleTable"
            :tableData="listDetails2"
            :paginationShow="true"
            :pageNumber="pages.current"
            :pageSize="pages.size"
            :total="pages.total"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
        >
        </tableList>
      </div>
    </el-card>
  </el-dialog>
</template>

<script>
import tableList from '@/components/tableList/index.vue'
import {getMergeSplitInfo, getMergeSplitItem, restoreFlow} from "@/api/transactionFlowInvoice";

export default {
  name: "flowMergingSplitDialog2",
  props: {
    type: {
      type: String,
      default: "",
    }
  },
  data() {
    return {
      title: "查看交易记录",
      table1Title: "",
      table2Title: "",
      dialogVisible: false,
      loading: false,
      keySet: [
        {
          label: '交易号',
          englishName: 'jyls',
          width: 200
        },
        {
          label: '交易日期',
          englishName: 'jyrq',
          width: 200
        },
        {
          label: '业务编号',
          englishName: 'ywbh',
          width: 200
        },
        {
          label: '获票人名称',
          englishName: 'kfhm',
          width: 200
        },
        {
          label: '投保单号',
          englishName: 'tbdh',
          width: 200
        },
        {
          label: '人民币交易金额',
          englishName: 'jyje',
          width: 200
        },
        {
          label: '税率',
          englishName: 'sysl',
          width: 200
        },
        {
          label: '税额',
          englishName: 'xxse',
          width: 200
        },
        {
          label: '不含税金额',
          englishName: 'bhsje',
          width: 200
        },
        {
          label: '交易机构',
          englishName: 'deptName',
          width: 200
        },
        {
          label: '开票状态',
          englishName: 'lszt',
          width: 200
        }
      ],
      listDetails: [],
      listDetails2: [],
      rdid: "",
      pages: {
        current: 1,
        size: 10,
        total: 0
      }
    }
  },
  methods: {
    openDialog() {
      this.dialogVisible = true
    },
    closeDialog() {
      this.listDetails = []
      this.listDetails2 = []
      this.dialogVisible = false
    },
    async getList(rdid, czlx, type) {
      this.loading = true
      if (czlx == 1) {
        // 拆分
        this.table1Title = "原记录"
        this.table2Title = "拆分出记录"
      } else {
        this.table1Title = "合并后的记录"
        this.table2Title = "原纪录"
      }
      this.type = type
      if (type === 'edit') {
        this.title = "还原交易数据"
      } else {
        this.title = "查看交易数据"
      }
      this.rdid = rdid;
      await this.getTable1Data();
      await this.getTable2Data();
      this.loading = false
    },
    async getTable1Data() {
      const {code, msg, data} = await getMergeSplitInfo(this.rdid)
      if (code == 200) {
        this.listDetails.push(
            {
              rdid: data.rdid,
              jyls: data.jyls,
              jyrq: data.jyrq,
              ywbh: data.ywbh,
              kfhm: data.kfhm,
              tbdh: data.tbdh,
              jyje: data.jyje,
              sysl: data.sysl,
              xxse: data.xxse,
              bhsje: data.bhsje,
              deptName: data.deptName,
              lszt: data.lszt,
              cfhbzt: data.chfbzt
            }
        )
      }
    },
    async getTable2Data() {
      let param = {
        pageNo: this.pages.current,
        pageSize: this.pages.size,
        rdid: this.rdid
      }
      
      const {code, msg, data} = await getMergeSplitItem(param)
      if (code == 200) {
        this.listDetails2 = data.records
        this.pages.total = data.total
        this.pages.current = data.current
      }
    },
    handleSizeChange(val) {
      this.pages.current = 1;
      this.pages.size = val;
      this.getTable2Data()
    },
    handleCurrentChange(val) {
      this.pages.current = val
      this.getTable2Data()
    },
    handleReduction() {
      // 弹窗询问确认
      this.$confirm('确定要还原吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 还原操作
        const {data, code, msg} = await restoreFlow(this.rdid)
        if (code == 200){
          this.closeDialog();
        }
        this.$emit('resList',true)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    }
  },
  components: {
    tableList
  },
}
</script>

<style lang="scss">
.text {
  font-size: 14px;
}

.box-card {
  width: 480px;
}

.el-card__header {
  padding: 10px !important;
  background: #F5F8FB !important;
}

.el-card__body {
  padding: 0 !important;
}
</style>
